<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请输入状态" :clearable="true" />
        </el-form-item>
        <el-form-item label="缴费方式" prop="payType">
          <el-select v-model="queryParams.payType" placeholder="请输入缴费方式" :clearable="true" />
        </el-form-item>
        <el-form-item label="缴费时间" prop="payTime">
          <el-date-picker
            v-model="queryParams.payTime"
            type="daterange"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :adaptive="true"
        :page-data="queryData"
        save-key="FeeDepositDetail"
        @page-change="getPage"
      >
        <template #menu="{ row }">
          <context-menu-item
            label="确认缴费"
            @click="handleMenuConfirm(row)"
            v-hasPermi="['fee:deposit:confirm']"
          />
        </template>
      </Table>
    </ContentWrap>
  </Dialog>
</template>
<script setup name="FeeDepositDetail" lang="ts">
import * as FeeDepositApi from '@/api/fee/feeDeposit'
import { DICT_TYPE, getDictObj } from '@/utils/dict'
import * as FeeCategoryApi from '@/api/fee/feeCategory'
const feeCategoryList = ref()
const message = useMessage() // 消息弹窗
const dialogTitle = ref('')
const dialogVisible = ref(false)
const queryFormRef = ref()
const queryParams = ref({
  status: undefined,
  payType: undefined,
  payTime: undefined,
  elderId: ''
})
const queryData = ref()
const columns = [
  {
    label: '姓名',
    prop: 'elder.name'
  },
  {
    label: '身份证号',
    prop: 'elder.identityCard'
  },
  {
    label: '登记入住日期',
    prop: 'elder.checkinDate'
  },
  {
    label: '押金说明',
    prop: 'description'
  },
  {
    label: '金额',
    prop: 'depositFee'
  },
  {
    label: '状态',
    prop: 'status',
    formatter: ({ status }) => getDictObj(DICT_TYPE.FEE_DEPOSIT_DETAIL_STATUS, status).label
  },
  {
    label: '缴费方式',
    prop: 'payType',
    formatter: ({ payType }) => getDictObj(DICT_TYPE.FEE_PAY_TYPE, payType).label
  },
  {
    label: '费用类别',
    prop: 'feeCategoryId',
    formatter: ({ feeCategoryId }) =>
      feeCategoryList.value.find((obj) => obj.id === feeCategoryId).categoryName
  },
  {
    label: '缴费时间',
    prop: 'payTime'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 打开弹窗 */
const open = async (id: string) => {
  feeCategoryList.value = await FeeCategoryApi.listQuery()
  dialogVisible.value = true
  dialogTitle.value = '押金详情'
  queryParams.value.elderId = id
  getPage()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await FeeDepositApi.pageQueryDetail(queryParams.value)
}

/** 处理右击事件 确认缴费 */
const handleMenuConfirm = async (row) => {
  await message.confirm('确认缴费吗？')
  await FeeDepositApi.confirm(row.id)
  message.success('缴费成功')
  getPage()
}
</script>
